我們先前的專案設計採用極簡主義，外觀比較普通。

接下來，我們將介紹如何利用流行的前端框架，打造美觀的前端專案。

想成為後端工程師，為什麼也要學前端

許多後端工程師認為自己只要專注後端開發，因此不需要學習前端技術。

實際情況是，台灣的後端工程師最終都會成為全端工程師，需要具備前後端的開發能力。

大多數後端工程師的第一份工作是負責公司承接的外包項目，這些項目可能僅需要後端開發，也可能是全端項目。

如果被分配到全端項目，工程師就需要獨自負責前後端的開發工作。

因此，掌握前端框架對於未來的職業生涯非常重要。

知名的前端框架

目前常用的前端框架是React和Vue.js。

雖然還有其他許多框架，但這兩個框架在GitHub上的Star數量皆超過二十萬。

相較之下，著名的Python和Linux的Star數量都少於二十萬，這足以顯示React和Vue.js的受歡迎程度。

安裝Node.js

不論React或Vue.js都需要Node.js，我們來安裝Node.js。

1. 來到官網https://nodejs.org/
2. 點擊「Download Node.js (LTS)」，下載Node.js，LTS是比較穩定的版本而且會持續的修復漏洞。

安裝完成後，打開命令提示字元，輸入node -v，確認安裝是否成功，成功時會顯示類似v20.16.0的版本號碼。

安裝Visual Studio Code

接下來安裝Visual Studio Code，它是一款個人可以免費使用的編輯器，並且有很多的前端工程師都在使用它。

來到官網https://code.visualstudio.com/Download下載並安裝VSCode。

在這邊和大家分享幾個可以提升效率的VSCode擴充元件。

• Chinese (Traditional) Language Pack for Visual Studio Code

讓我們的VSCode界面顯示中文

• ES7+ React/Redux/React-Native snippets

在VSCode新增js或ts時，只會產生一個空的檔案，因此我們要自己完成專案的結構程式碼。

這個擴充功能可以幫助我們，減少需要輸入的文字。

例如：打rafce可以產生以下內容

import React from 'react'

const page = () => {
  return (
	<div>page</div>
  )
}

export default page

打rfc則是這些內容

import React from 'react'

export default function page() {
  return (
	<div>page</div>
  )
}

以上這兩個是React專案中常用的結構

• Prettier - Code formatter

這之前編寫HTML時，一定有人覺得排版是一項惱人的問題，需要一直按tab來對齊。

我們使用Prettier就能自動化完成美觀的排版。只要在程式碼的部分，按下右鍵選擇格式化文件，雜亂無章的內容就能瞬間變整齊。